<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="keywords" content="M3,m3,css3,html5" />
<head>
<link href="m3.css" type="text/css" rel="stylesheet" />
<style type="text/css">
#Box{
	position:relative;
	width:600px;
	height:650px;
	margin:0 auto;
	transform-style:preserve-3d;
	backface-visibility:visible;
}

*{margin:0px;padding:0px;}
html{
	-webkit-text-size-adjust:none;
}
body{
	background:#666;

}
/*正面css*/
#front{
	position:absolute;left:200px;top:60px;width:275px;height:545px;
	z-index:2;
}

#front .screen{
	position:absolute;
	left:18px;top:60px;
	width:242px;height:430px;
	background-image:-moz-linear-gradient(top,#393146,#583962,#b37c77,#231816);
	background-image:-webkit-linear-gradient(top,#393146,#583962,#b37c77,#231816);
	background-image:linear-gradient(top,#393146,#583962,#b37c77,#231816);
}
#front .screen .top{
	position:absolute;
	left:0px;top:0px;
	width:100%;
	height:16px;
	background:rgba(0,0,0,0.2);
}
#front .screen .info{
	position:absolute;
	left:0px;width:100%;
	top:40px;
	text-align:center;
}
#front .screen .info .date{
	width:200px;
	font-size:40px;
	color:#DDD;
	font-family:'微软雅黑';
	margin:0 auto;
}

#front .screen .info .day{
	width:200px;
	font-size:12px;
	color:#ddd;
	font-family:'微软雅黑';
	margin:1px auto;
}

#front .screen .info .line{
	width:140px;
	height:1px;
	background:-moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0));
	background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0));
	background:linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.8),rgba(255,255,255,0));
	margin:1px auto;
}

#front .screen .info .weather{
	width:200px;
	font-size:12px;
	color:#ddd;
	font-family:'微软雅黑';
	margin:1px auto;
}

#front .screen .top .time{
	float:right;
	padding-right:3px;
	padding-left:3px;
	height:18px;
	line-height:18px;
	color:#ddd;
	font-family:'微软雅黑';
	font-size:10px;
}

#front .screen .top .power{
	float:right;
	padding-right:3px;
	padding-left:3px;
}

#front .screen .top .power .p1{
	height:2px;
	float:left;
	width:1px;
	background:#ddd;
	margin-top:8px;
	margin-right:2px;
}

#front .screen .top .power .p2{
	height:6px;
	width:12px;
	margin-top:5px;
	border-width:1px;
	border-style:solid;
	border-color:#ddd;
	border-radius:2px;
	margin-left:1px;
}

#front .screen .top .power .p2 div{
	float:right;
	height:4px;width:6px;
	border:solid rgba(0,0,0,0.7) 1px ;
	background:#ddd;
	border-radius:1px;
}

#front .screen .top .sign{
	float:right;
	padding-right:5px;
	padding-left:5px;
	height:18px;
	line-height:18px;
}

#front .screen .top .sign div{
	height:2px;
	width:2px;
	float:right;
	background:#ddd;
	margin-left:1px;
}

#front .screen .top .sign div:nth-child(5){
	height:2px;
	margin-top:12px;
}

#front .screen .top .sign div:nth-child(4){
	height:4px;
	margin-top:10px;
}

#front .screen .top .sign div:nth-child(3){
	height:6px;
	margin-top:8px;
}

#front .screen .top .sign div:nth-child(2){
	height:8px;
	margin-top:6px;
}

#front .screen .top .sign div:nth-child(1){
	height:10px;
	margin-top:4px;
}

#front .screen .page{
	position:absolute;
	left:0px;bottom:72px;
	height:4px;
	width:100%;
}

#front .screen .page .outer{
	width:40px;height:4px;
	margin:0 auto;
}
#front .screen .page .outer div{
	width:4px;height:4px;
	margin:0 2px;
	background:rgba(255,255,255,.5);
	float:left;
	border-radius:2px;
	box-shadow:0px 1px 1px rgba(0,0,0,0.3) ;
}

#front .screen .page .outer div:nth-child(2){
	background:rgba(255,255,255,.9);
}

#front .screen .footer{
	position:absolute;left:0px;
	bottom:0px;
	width:100%;
	height:60px;
}

#front .screen .footer > div{
	width:40px;
	height:40px;
	border-radius:6px;
	position:absolute;
}
#front .screen .footer > div span.title{
	position:absolute;
	bottom:-18px;left:0px;width:100%;height:18px;line-height:18px;
	font-size:8px;text-align:center;display:block;
	color:#ddd;
	font-family:'微软雅黑' ;
}
#front .screen .footer .icon_1{
	background-image:radial-gradient(#539b09,#66af08);
	left:16px;
	top:0px;
}

#front .screen .footer .icon_1 .outer{
	position:relative;
	left:12px;top:9px;
	width:11px;
	height:26px;
	overflow:hidden;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	box-shadow:-1px 1px 1px rgba(0,0,0,0.3);
	transform:rotate(-45deg);
}

#front .screen .footer .icon_1 .outer .inner{
	position:absolute;
	left:0px;top:0px;
	width:12px;height:10px;
	border:8px solid #ebe9ea;
	border-left:5px solid #ebe9ea;
	border-radius:10px;
}

#front .screen .footer .icon_2{
	background-image:radial-gradient(#2379cc,#3190e4);
	left:72px;
	top:0px;
}

#front .screen .footer .icon_2 .outer{
	position:absolute;
	left:7px;top:7px;width:26px;height:25px;
	border-radius:2px;
	overflow:hidden;
	box-shadow:0px 1px 0px rgba(0,0,0,0.3);
}

#front .screen .footer .icon_2 .inner1{
	position:absolute;
	left:8px;top:3px;
	width:10px;
	height:13px;
	background:#ddd;
	border-radius:8px;
}

#front .screen .footer .icon_2 .inner2{
	position:absolute;
	left:-5px;top:16px;
	width:0px;
	height:0px;
	border-bottom:#ddd solid 10px;
	border-left:transparent solid 18px;
	border-right:transparent solid 18px;
	border-radius:10px;
}

#front .screen .footer .icon_2 .inner3{
	position:absolute;
	left:5px;top:9px;
	width:0px;
	height:0px;
	border-radius:5px;
	border-top:#ddd solid 10px;
	border-left:transparent solid 8px;
	border-right:transparent solid 8px;
}

#front .screen .footer .icon_3{
	background-image:radial-gradient(#ca4c0f,#da580c);
	left:128px;
	top:0px;
}

#front .screen .footer .icon_3 .outer1{
	position:absolute;
	left:9px;top:10px;
	width:12px;
	height:10px;
	border:solid 5px #ddd;
	border-radius:11px;
	box-shadow:0px 1px 1px rgba(0,0,0,0.8) ;
}

#front .screen .footer .icon_3 .outer2{
	position:absolute;
	left:14px;top:26px;
	width:4px;
	height:6px;
	background:#ddd;
	transform:skew(-45deg) rotate(-30deg);
}

#front .screen .footer .icon_4{
	background-image:radial-gradient(#6c54b4,#8262d1);
	left:184px;
	top:0px;
}

#front .screen .footer .icon_4 .outer1{
	position:absolute;
	left:9px;top:9px;
	width:10px;
	height:10px;
	border:solid 6px #ddd;
	border-radius:11px;
	box-shadow:0px 1px 1px rgba(0,0,0,0.8) ;
}

#front .screen .middle{
	position:absolute;left:0px;
	bottom:150px;
	width:100%;
	height:60px;
}

#front .screen .middle > div{
	width:40px;
	height:40px;
	border-radius:6px;
	position:absolute;
}
#front .screen .middle > div span.title{
	position:absolute;
	bottom:-18px;left:0px;width:100%;height:18px;line-height:18px;
	font-size:8px;text-align:center;display:block;
	color:#ddd;
	font-family:'微软雅黑' ;
}
#front .screen .middle .icon_1{
	background-image:radial-gradient(#ddd,#ccc);
	left:16px;
	top:0px;
}

#front .screen .middle .icon_1 .outer{
	position:relative;
	left:8px;top:8px;
	width:14px;
	height:14px;
	border:solid #EEE 5px;
	border-radius:12px;
	box-shadow:0px 1px 1px rgba(0,0,0,.2);
}

#front .screen .middle .icon_1 .outer .inner{
	width:12px;height:12px;
	border:solid 1px rgba(0,0,0,.5);
	border-radius:7px;
	background:#664455;
}

#front .screen .middle .icon_1 .outer .inner2{
	width:6px;height:7px;
	border-left:solid 3px transparent;
	border-right:solid 3px transparent;
	border-top:solid 3px rgba(255,255,255,.5);
	border-bottom:solid 2px rgba(255,255,255,.5);
	border-radius:6px;
	background:rgba(0,0,0,.5);
}

#front .screen .middle .icon_2{
	background-image:radial-gradient(#ca4c0f,#da580c);
	left:72px;
	top:0px;
}

#front .screen .middle .icon_2 .outer{
	position:absolute;
	left:9px;top:12px;width:22px;height:5px;
	border-radius:2px;
	background:#ddd;
	box-shadow:0px 1px 1px rgba(0,0,0,0.3);
}

#front .screen .middle .icon_2 .outer2{
	position:absolute;
	left:9px;top:22px;width:22px;height:5px;
	border-radius:2px;
	background:#ddd;
	box-shadow:0px 1px 1px rgba(0,0,0,0.3);
}

#front .screen .middle .icon_3{
	background-image:radial-gradient(#2379cc,#3190e4);
	left:128px;
	top:0px;
}

#front .screen .middle .icon_3 .outer2{
	position:absolute;
	left:14px;top:8px;
	width:0px;
	height:0px;
	border-left:solid 15px #ddd ;
	border-top:12px solid transparent;
	border-bottom:12px solid transparent;
	border-radius:2px;
}

#front .screen .middle .icon_3 .outer1{
	position:absolute;
	left:14px;top:10px;
	width:0px;
	height:0px;
	border-left:solid 15px rgba(0,0,0,0.3) ;
	border-top:12px solid transparent;
	border-bottom:12px solid transparent;
	border-radius:2px;
}

#front .screen .middle .icon_4{
	background-image:radial-gradient(#ca4c0f,#da580c);
	left:184px;
	top:0px;
}

#front .screen .middle .icon_4 .outer1{
	position:absolute;
	left:0px;top:0px;
	width:100%;
	height:50%;
	border-radius:6px;
	background:#ca3a17;
}

#front .screen .middle .icon_4 .outer2{
	position:absolute;
	left:0px;top:50%;
	width:100%;
	height:50%;
	border-radius:6px;
	background:#ea4e28;
}

#front .screen .middle .icon_4 .outer3{
	position:absolute;
	left:0px;top:0px;
	width:100%;
	height:100%;
	line-height:40px;
	color:#ddd;
	text-align:center;
	font-family:'微软雅黑';
	font-size:26px;
}

#front .screen .middle .icon_5{
	background-image:radial-gradient(#0399a7,#05a7be);
	left:16px;
	top:60px;
}

#front .screen .middle .icon_5 .outer{
	position:relative;
	left:8px;top:8px;
	width:16px;
	height:16px;
	border:solid #EEE 4px;
	border-top:solid 4px transparent;
	border-radius:12px;
	box-shadow:0px 1px 1px rgba(0,0,0,.2);
	transform:rotate(135deg);
}
#front .screen .middle .icon_5 .outer2{
	position:absolute;
	left:21px;top:18px;
	width:0px;height:0px;
	border-right:10px solid #EEE;
	border-top:4px transparent solid ;
	border-bottom:4px transparent solid ;
	transform:rotate(22deg);
	broder-radius:3px;
}
#front #panel{
	position:absolute;
	left:7px;top:3px;
	width:260px;height:535px;
	border-radius:2px;
	box-shadow:0px 0px 2px #000;
	border:solid #191919 2px;
	background:#0f0f0f;
}

#front #panel #receives{
	position:absolute;
	left:111px;top:18px;
	width:34px;height:6px;
	border:solid transparent 1px;
	background:#000;
	border-radius:3px;
	box-shadow:0px 1px 1px #585858;
}
#front #panel #video{
	position:absolute;
	left:164px;top:19px;
	width:4px;height:4px;
	border:solid transparent 1px;
	background:#000;
	border-radius:3px;
	box-shadow:0px 1px 1px #585858;
}
#front #panel .logo{
	position:absolute;
	left:10px;top:30px;width:21px;height:13px;
}
#front #panel .logo .m1{
	position:absolute;
	left:0px;top:0px;
	border-left:solid #b1b1b1 3px;
	border-top:solid #b1b1b1 3px;
	border-right:solid #b1b1b1 3px;
	height:10px;
	width:9px;
	border-top-right-radius:4px;
}
#front #panel .logo .m2{
	position:absolute;
	left:6px;bottom:0px;
	width:3px;height:8px;
	background:#b1b1b1;
}
#front #panel .logo .m3{
	position:absolute;
	right:0px;bottom:0px;
	width:3px;height:14px;
	background:#b1b1b1;
}
#front #panel #menu{
	position:absolute;
	left:52px;top:501px;
	width:11px;
	height:5px;
	border-top:solid #2b2b2b 1px;
	border-bottom:solid #2b2b2b 1px;
}
#front #panel #menu div{
	position:absolute;
	left:0px;top:2px;
	width:11px;
	height:1px;
	background:#2b2b2b;
}
#front #panel #home{
	position:absolute;
	left:123px;top:505px;
	width:8px;
	height:3px;
	border-left:solid #2b2b2b 1px;
	border-right:solid #2b2b2b 1px;
	border-bottom:solid #2b2b2b 1px;
	border-bottom-left-radius:2px;
	border-bottom-right-radius:2px;
}
#front #panel #home div{
	margin:-5px 0px;
	width:8px;
	height:8px;
	border-top:solid #2b2b2b 1px;
	border-right:solid #2b2b2b 1px;
	transform:rotate(-30deg) skew(30deg);
}
#front #panel #back{
	position:absolute;
	left:198px;top:502px;
	width:8px;
	height:4px;
	border-top:solid #2b2b2b 1px;
	border-right:solid #2b2b2b 1px;
	border-bottom:solid #2b2b2b 1px;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
}
#front #panel #back div{
	margin:-2px -1px;
	width:3px;
	height:3px;
	border-top:solid #2b2b2b 1px;
	border-left:solid #2b2b2b 1px;
	transform:rotate(-45deg);
}
/*顶部*/
#top{
	position:absolute;left:200px;top:33px;width:275px;height:30px;
	transform-origin:center bottom;
	transform:rotateX(90deg);

}
#top .shell{
	position:absolute;
	left:-1px;top:0px;width:279px;
	height:29px;
	background:#f0f0f0;
	border-radius:15px;
}
#top .shell .out{
	position:absolute;
	left:33px;top:5px;
	width:14px;height:14px;
	background:#0c0b10;
	border-radius:7px;
	box-shadow:-1px -1px 1px #414045 inset;
}
#top .shell .holeBox{
	position:absolute;
	left:60px;top:10px;
	width:8px;height:8px;
}
#top .shell .holeBox div{
	width:2px;height:2px;
	border-radius:1px;
	float:left;
	background:#000;
	margin:1px;
}
#top .shell #card{
	position:absolute;
	left:84px;top:6px;
	width:102px;height:10px;
	border:1px solid #000;
	border-radius:5px;
}
#top .shell #card #hole{
	position:absolute;
	left:16px;top:0px;
	width:4px;
	height:5px;
	background:#090909;
	border-bottom-left-radius:2px;
	border-bottom-right-radius:2px;
}
#top .screen{
	position:absolute;
	left:9px;top:22px;
	width:256px;height:6px;
	border-top:#999 1px solid ;
	border-bottom:#1b1b1b 1px solid ;
	background:#111;
	box-shadow:-1px 0px 1px #444;
}
#top .screen .left{
	position:absolute;
	left:-3px;top:0px;
	width:4px;
	height:6px;
	border-left:1px solid #444;
	border-bottom:1px solid #444;
	transform:rotate(45deg);
	background:#111;
	box-shadow:-1px 0px 1px #444;
}
#top .screen .right{
	position:absolute;
	right:-3px;top:1px;
	width:6px;
	height:4px;
	border-right:1px solid #444;
	border-top:1px solid #444;
	transform:rotate(45deg);
	background:#111;
	box-shadow:0px -1px 1px #444;
}
#top .screen .light{
	position:absolute;
	left:0px;top:5px;
	width:256px;height:2px;
	border-radius:1px;
	background-image:-moz-linear-gradient(left,#43464d,#e6eff8,#636d76,#989ba2,#7d8285);
	background-image:-webkit-linear-gradient(left,#43464d,#e6eff8,#636d76,#989ba2,#7d8285);
	opacity:0.8;
}
/*底部*/
#bottom{
	position:absolute;left:200px;top:603px;width:275px;
	transform:translateZ(-30px) rotateZ(180deg) rotateX(90deg);
}
#bottom .shell{
	position:absolute;
	left:0px;top:0px;width:275px;
	height:29px;
	background:#f0f0f0;
	border-radius:15px;
}
#bottom .shell .out{
	position:absolute;
	left:220px;top:7px;
	width:34px;height:10px;
	background:#0c0b10;
	border-radius:3px;
	box-shadow:-1px -1px 1px #414045 inset;
}
#bottom .shell #holeBox{
	position:absolute;
	left:90px;top:7px;
	width:90px;height:16px;
}
#bottom .shell #holeBox div{
	width:2px;height:2px;
	border-radius:1px;
	float:left;
	background:#000;
	margin-left:1px;
	margin-bottom:1px;
}
#bottom .screen{
	position:absolute;
	left:9px;top:22px;
	width:256px;height:6px;
	border-top:#999 1px solid ;
	border-bottom:#1b1b1b 1px solid ;
	background:#111;
	box-shadow:-1px 0px 1px #444;
}
#bottom .screen .left{
	position:absolute;
	left:-3px;top:0px;
	width:4px;
	height:6px;
	border-left:1px solid #444;
	border-bottom:1px solid #444;
	transform:rotate(45deg);
	background:#111;
	box-shadow:-1px 0px 1px #444;
}
#bottom .screen .right{
	position:absolute;
	right:-3px;top:1px;
	width:6px;
	height:4px;
	border-right:1px solid #444;
	border-top:1px solid #444;
	transform:rotate(45deg);
	background:#111;
	box-shadow:0px -1px 1px #444;
}
#bottom .screen .light{
	position:absolute;
	left:0px;top:5px;
	width:256px;height:2px;
	border-radius:1px;
	background-image:-moz-linear-gradient(left,#43464d,#e6eff8,#636d76,#989ba2,#7d8285);
	background-image:-webkit-linear-gradient(left,#43464d,#e6eff8,#636d76,#989ba2,#7d8285);
	opacity:0.8;
}
/*backside*/
#backside{
	position:absolute;left:202px;top:60px;width:275px;height:545px;
	transform:rotateY(180deg) translateZ(29px);
}
#backside .shell{
	position:absolute;
	left:7px;top:3px;
	width:260px;height:535px;
	border-radius:2px;
	box-shadow:0px 0px 2px #f0f0f0;
	border:solid #f0f0f0 2px;
	background:#f0f0f0;
}
#backside .shell .logo{
	position:absolute;
	left:110px;top:419px;width:36px;height:24px;
}
#backside .shell .logo .m1{
	position:absolute;
	left:0px;top:0px;
	border-left:solid #b1b1b1 7px;
	border-top:solid #b1b1b1 7px;
	border-right:solid #b1b1b1 7px;
	height:17px;
	width:12px;
	border-top-right-radius:8px;
}
#backside .shell .logo .m2{
	position:absolute;
	left:10px;bottom:0px;
	width:6px;height:14px;
	background:#b1b1b1;
}
#backside .shell .logo .m3{
	position:absolute;
	right:0px;bottom:0px;
	width:7px;height:24px;
	background:#b1b1b1;
}
#backside .shell .camera{
	position:absolute;
	left:21px;top:13px;
	width:26px;height:26px;
	border:#101012 solid 3px;
	border-radius:6px;
	background:#0e0f13;
	box-shadow:0px 0px 2px #f0f0f0;
}
#backside .shell .camera .light{
	width:24px;
	height:24px;
	border:solid 1px #333;
	border-radius:6px;
	background:radial-gradient(#0f0f0f,#0f0f0f,#282828,#0e0f13,#0e0f13,#0e0f13);
}
#backside .shell .flashlight{
	position:absolute;
	left:62px;top:13px;
	width:10px;height:30px;
	border:#5a5a5a solid 1px;
	border-radius:4px;
	box-shadow:0px 0px 2px #f0f0f0;
	opacity:0.8;
}
#backside .shell .flashlight div{
	opacity:0.6;
	width:10px;height:15px;
	background:radial-gradient(#ececca,#ececca,#c6c8bb,#59564d,#c6c8bb,#59564d,#c6c8bb,#59564d,#c6c8bb,#59564d,#5a5a5a);
}
#backside .shell .leftlight{
	position:absolute;
	left:3px;top:7px;
	width:8px;height:520px;
	background:linear-gradient(90deg,#f0f0f0,#fff,#f0f0f0);
	border-radius:4px;
	box-shadow:0px 0px 2px #f0f0f0;
	opacity:0.6;
}
#backside .shell .rightlight{
	position:absolute;
	right:3px;top:7px;
	width:8px;height:520px;
	background:linear-gradient(90deg,#f0f0f0,#fff,#f0f0f0);
	border-radius:4px;
	box-shadow:0px 0px 2px #f0f0f0;
	opacity:0.6;
}
/*左右侧边*/
#broadsideLeft{
	position:absolute;left:176px;top:60px;width:30px;height:545px;
	transform-origin:right center;
	transform:rotateY(-90deg);
	transform-style:preserve-3d;
}
#broadsideLeft div{
	position:absolute;
	top:3px;
	height:539px;
	background:#f0f0f0;
	width:2px;
}

#broadsideRight{
	position:absolute;left:471px;top:60px;width:30px;height:545px;
	transform-origin:left center;
	transform:rotateY(90deg);
	transform-style:preserve-3d;
}
#broadsideRight div{
	position:absolute;
	top:3px;
	height:539px;
	background:#f0f0f0;
	width:2px;
}
.volume{
	position:absolute;
	left:475px;top:130px;
	width:7px;
	height:60px;
	transform-style:preserve-3d;
	transform:rotateY(90deg) translateX(15px);
}

.volume .center{
	position:absolute;left:0px;top:0px;
	width:7px;height:70px;
	background:#b1b1b1;
	border-radius:3px;
}

.volume .left{
	position:absolute;left:-3px;top:3px;
	width:3px;height:64px;
	background:#a1a1a1;
	transform-origin:right center;
	transform:rotateY(-90deg);
}

.volume .right{
	position:absolute;right:-3px;top:3px;
	width:3px;height:64px;
	background:#a1a1a1;
	transform-origin:left center;
	transform:rotateY(90deg);
}

.volume .top{
	position:absolute;left:-1px;top:-1px;
	width:7px;height:3px;
	transform-style:preserve-3d;
	transform-origin:center bottom;
	transform:rotateX(90deg);
}

.volume .bottom{
	position:absolute;right:1px;bottom:0px;
	width:7px;height:3px;
	transform-style:preserve-3d;
	transform-origin:center top;
	transform:rotateX(-90deg);
}

.volume .top div{
	position:absolute;top:0px;height:3px;
	width:3px;background:#a1a1a1;
}

.volume .bottom div{
	position:absolute;top:0px;height:3px;
	width:3px;background:#a1a1a1;
}

.open{
	position:absolute;
	left:475px;top:220px;
	width:7px;
	height:30px;
	transform-style:preserve-3d;
	transform:rotateY(90deg) translateX(15px);
}

.open .center{
	position:absolute;left:0px;top:0px;
	width:7px;height:30px;
	background:#b1b1b1;
	border-radius:3px;
}

.open .left{
	position:absolute;left:-3px;top:3px;
	width:3px;height:24px;
	background:#a1a1a1;
	transform-origin:right center;
	transform:rotateY(-90deg);
}

.open .right{
	position:absolute;right:-3px;top:3px;
	width:3px;height:24px;
	background:#a1a1a1;
	transform-origin:left center;
	transform:rotateY(90deg);
}

.open .top{
	position:absolute;left:-1px;top:-1px;
	width:7px;height:3px;
	transform-style:preserve-3d;
	transform-origin:center bottom;
	transform:rotateX(90deg);
}

.open .bottom{
	position:absolute;right:1px;bottom:0px;
	width:7px;height:3px;
	transform-style:preserve-3d;
	transform-origin:center top;
	transform:rotateX(-90deg);
}

.open .top div{
	position:absolute;top:0px;height:3px;
	width:3px;background:#a1a1a1;
}

.open .bottom div{
	position:absolute;top:0px;height:3px;
	width:3px;background:#a1a1a1;
}
</style>
</head>
<body>
<div id="Box">
	<div id="front">
		<div id="panel">
			<div id="receives"></div>
			<div id="video"></div>
			<div class="logo">
				<div class="m1"></div>
				<div class="m2"></div>
				<div class="m3"></div>
			</div>
			<div id="menu"><div></div></div>
			<div id="home"><div></div></div>
			<div id="back"><div></div></div>
		</div>
		<div class="screen">
			<div class="top">
				<div class="time">14:00</div>
				<div class="power">
					<div class="p1"></div>
					<div class="p2"><div></div></div>
				</div>
				<div class="sign"><div></div><div></div><div></div><div></div><div></div></div>
			</div>
			<div class="info">
				<div class="date">14:00</div>
				<div class="day">12/1 (十月初十) 周一</div>
				<div class="line"></div>
				<div class="weather">郑州 -1°C 晴</div>
			</div>
			<div class="middle">
				<div class="icon_1">
					<div class="outer">
						<div class="inner"><div class="inner2"></div></div>
					</div>
					<span class="title">相机</span>
				</div>
				<div class="icon_2">
					<div class="outer"></div>
					<div class="outer2"></div>
					<span class="title">计算器</span>
				</div>
				<div class="icon_3">
					<div class="outer1"></div>
					<div class="outer2"></div>
					<span class="title">视频</span>
				</div>
				<div class="icon_4">
					<div class="outer1"></div>
					<div class="outer2"></div>
					<div class="outer3">01</div>
					<span class="title">日历</span>
				</div>
				<div class="icon_5">
					<div class="outer"></div>
					<div class="outer2"></div>
					<span class="title">备份</span>
				</div>
			</div>
			<div class="page">
				<div class="outer"><div></div><div></div><div></div><div></div><div></div></div>
			</div>
			<div class="footer">
				<div class="icon_1">
					<div class="outer">
						<div class="inner"></div>
					</div>
					<span class="title">拨号</span>
				</div>
				<div class="icon_2">
					<div class="outer">
						<div class="inner1"></div>
						<div class="inner2"></div>
						<div class="inner3"></div>
					</div>
					<span class="title">联系人</span>
				</div>
				<div class="icon_3">
					<div class="outer1"></div>
					<div class="outer2"></div>
					<span class="title">短信</span>
				</div>
				<div class="icon_4">
					<div class="outer1"></div>
					<div class="outer2"></div>
					<span class="title">浏览器</span>
				</div>
			</div>
		</div>
	</div>
	<div id="top">
		<div class="shell">
			<div class="out"></div>
			<div class="holeBox"><div></div><div></div><div></div><div></div></div>
			<div id="card">
				<div id="hole"></div>
			</div>
		</div>
		<div class="screen">
			<div class="left"></div>
			<div class="right"></div>
			<div class="light"></div>
		</div>
	</div>

	<div id="bottom">
		<div class="shell">
			<div class="out"></div>
			<div id="holeBox"></div>
		</div>
		<div class="screen">
			<div class="left"></div>
			<div class="right"></div>
			<div class="light"></div>
		</div>
	</div>

	<div id="backside">
		<div class="shell">
			<div class="logo">
				<div class="m1"></div>
				<div class="m2"></div>
				<div class="m3"></div>
			</div>
			<div class="camera">
				<div class="light"></div>
			</div>
			<div class="flashlight"><div></div><div></div></div>
			<div class="leftlight"></div>
			<div class="rightlight"></div>
		</div>
	</div>

	<div id="broadsideLeft"></div>
	<div id="broadsideRight"></div>

	<div class="volume" id="volume">
		<div class="top" id="volumeTop"></div>
		<div class="left"></div>
		<div class="center"></div>
		<div class="bottom" id="volumeBottom"></div>
		<div class="right"></div>
	</div>
	<div class="open" id="open">
		<div class="top" id="openTop"></div>
		<div class="left"></div>
		<div class="center"></div>
		<div class="bottom" id="openBottom"></div>
		<div class="right"></div>
	</div>

</div>
</body>
<script>
function addBottomHole(){
	var holeBox = $('holeBox') ;
	for(var i = 0 ; i < 120 ; i ++){
		var _div = document.createElement('div') ;
		holeBox.appendChild(_div) ;
	}
}

function addColume(ele,width,check){
	var r = width/2 ;
	for(var i = 1 ; i < width ; i ++){
		var _d = document.createElement('div') ;
		_d.style.left = i+"px" ;
		var z = Math.sqrt(r*r-Math.abs(i-r)*Math.abs(i-r))-check ;
		var deg = Math.asin((r-i)/r)*180/Math.PI ;
		_d.style.transform = "translateZ("+z+"px) rotateY("+-deg+"deg)" ;
		ele.appendChild(_d);
	}
}

function $(id){
	return document.getElementById(id) ;
}

function funInit(){
	addBottomHole();
	addColume($('broadsideLeft'),30,8);
	addColume($('broadsideRight'),30,8);
	addColume($('volumeTop'),9,1);
	addColume($('volumeBottom'),9,1);
	addColume($('openTop'),9,1);
	addColume($('openBottom'),9,1);
}

funInit();

var degX = 0 ;
var box = $('Box') ;
var interval = 0 ;
interval = setInterval(function(){
	degX += 1 ;
	box.style.transform = "rotateY("+degX+"deg) rotateX(40deg)"
},30);

</script>
</html>